<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        div{
            background-color:gold;
            border: 1px solid black;
            width: 200px;
        }
        .div1{
            background-color: yellow;
            border: none;
            width: 315px;
            height: 275px;
            /*padding-left: 15px;*/
            /*padding-bottom: 10px;*/
            /*padding-top: 15px;*/
        }
        .div2{
            background-color: aqua;
            border: none;
            width: 315px;
            height: 275px;
            /*padding-left: 15px;*/
            /*padding-bottom: 10px;*/
            /*padding-top: 15px;*/
            margin-left: 30px;
        }
        .div1,.div2{
            float: left;
        }
        #d{
            position: relative;
            background-color: blue;
            border: none;
            width: 660px;
            height: 500px;
            margin: auto;
        }
        a{
            display: inline-block;
        }
        .c1,.c2{
            position: absolute;
            margin-right: 0px;
            width: 315px;
            height: 500px;
        }
    </style>
</head>
<body>
  <p style="height: 40px">块元素p,占一行</p>



  <div>
      块元素div 占据一行
  </div>
  <span style="width: 200px;height: 45px ;display: block ">不占整行，内联元素span ,设置宽高无效</span>
  <div id="d">


      <div class="div1">
          <img  class="c1" src="../imgs/G2.jpg">
      </div>

          <div class="div2">
              <img class="c2" src="../imgs/M9.jpg">
      </div>

  </div>
</body>
</html>